<template>
  <div>
    <router-link to="/find">发现音乐</router-link> |
    <router-link to="/my/18">我的音乐</router-link> |
    <router-link to="/friend?name=小智">朋友</router-link>
    <!-- 7、设置路由挂载点 -->
    <router-view></router-view>
    <button @click="toPage">点我跳转到"发现音乐"页面</button>
  </div>
</template>

<script>
export default {
  methods:{
    /**
     * 编程式导航：就是通过js方式跳转页面
     * 方法一：
     * this.$router.push({
     *   path: "路由规则中定义的路由路径"
     * })
     * 方法二：
     * this.$router.push({
     *  name: "路由规则中定义的路由name属性的值"
     * })
     * 
     * */ 
    toPage(){
      // 跳转页面
      this.$router.push({
        // path: "/find"
        name: "find"
      })
    }
  }
}
</script>

<style>
.router-link-active{
  color: red;
  font-weight: bold;
}
</style>